<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/productList.css">
</head>
<body>
    <header class="header">
        <div class="container-full bg-black font-white">
            <div class="first-nav center cf">
                <a href="#" class="fl font-white f-l-i220">legochina.cn</a>
                <p class="fr">欢迎光临
                    <a href="#" class="theme-font-color">乐购</a>,请
                    <a href="#" class="font-white">登录</a>/
                    <a href="#" class="theme-font-color">注册</a>
                </p>
                <img class="logo" src="./images/logo.jpg" alt="">
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="center search-box cf" style="min-width: 700px;">

            <div class="shopcart fr">
                <a href="#" class="font-white">购物车
                    <span>3</span>
                </a>
                <a href="#">我的订单</a>
            </div>

            <div class="fr search-input-box">
                <form action="">
                    <input type="text" class="theme-border-color" placeholder="创意文具">
                    <input type="submit" value="" style="margin-left:-7px; cursor: pointer;">
                </form>
                <!-- 购物车的订单 -->
            </div>
        </div>
        <!-- 导航栏 -->
        <nav class="navigation center">
            <ul class="cf">
                <li>
                    <a href="#">图书</a>
                </li>
                <li>
                    <a href="#">电子书</a>
                </li>
                <li>
                    <a href="#">原创文学</a>
                </li>
                <li>
                    <a href="#">服装</a>
                </li>
                <li>
                    <a href="#">户外运动</a>
                </li>
                <li>
                    <a href="#">儿童装</a>
                </li>
                <li>
                    <a href="#">家具</a>
                </li>
                <li>
                    <a href="#">创意文具</a>
                </li>
                <li>
                    <a href="#">地方特产</a>
                </li>
                <li>
                    <a href="#">海外购</a>
                </li>
                <li>
                    <a href="#">电器城</a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- 猜你喜欢: 简单实现轮播图 -->
        <section class="guess-favorite center">
            <div class="title cf">
                <div class="fl">
                    <p class="fl">猜</p>
                    <p class="fl">你喜欢</p>
                </div>
                <a  class="fr changeGoods" href="javascript:void(0);" >换一批</a>
            </div>

            <div class="line5 theme-bg-color"></div>
            
            <div id="box1" class="today-recommend">
                 <div>
                      <!-- 一张轮播图 -->
                    <ul class="cf">
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                        </ul>
                        <!-- 一张轮播图 -->
                        <ul class="cf">
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                            </ul>
                            <!-- 一张轮播图 -->
                        <ul class="cf">
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                            </ul>
                            <!-- 一张轮播图 -->
                        <ul class="cf">
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                                <li>
                                    <img src="./images/pdemo.jpg" alt="">
                                    <p class="font-grey">查理 史密斯</p>
                                    <p class="font-grey">中国邮电出版社</p>
                                    <p class="font-red">$ 49</p>
                                </li>
                            </ul>
                 </div>
                    
            </div>





        </section>

        <!-- 独家提供：简单实现轮播图 + 附加功能 -->

        <section class="guess-favorite center">
            <div class="title cf">
                <div class="fl">
                    <p class="fl">独</p>
                    <p class="fl">家提供</p>
                </div>
            </div>

            <div class="line5 theme-bg-color"></div>
            
            <div id="box2" class="today-recommend">
                <div>
                     <!-- 一张轮播图 -->
                     <ul class="cf">
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">111111查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                    </ul>
                    <!-- 一张轮播图 -->
                    <ul class="cf">
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">22222查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                        </ul>
                        <!-- 一张轮播图 -->
                    <ul class="cf">
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">3333查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                        </ul>
                        <!-- 一张轮播图 -->
                    <ul class="cf">
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">44444查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                            <li>
                                <img src="./images/pdemo.jpg" alt="">
                                <p class="font-grey">查理 史密斯</p>
                                <p class="font-grey">中国邮电出版社</p>
                                <p class="font-red">$ 49</p>
                            </li>
                        </ul>
                         <!-- 一张轮播图 -->
                     <ul class="cf">
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">111111查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                        <li>
                            <img src="./images/pdemo.jpg" alt="">
                            <p class="font-grey">查理 史密斯</p>
                            <p class="font-grey">中国邮电出版社</p>
                            <p class="font-red">$ 49</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="left-btn">
                《
            </div>
            <div class="right-btn">
                》
            </div>




        </section>


    </main>

    <footer class="footer center">
        <img src="./images/footer.png" alt="">
    </footer>

     <script src="http://www.jq22.com/jquery/1.4.4/jquery.min.js"></script>
     <script src="./js/productList.js"></script>
</body>
</html>